<template>
  <el-dialog class="public-dialog" :title="title" :width="width" :modelValue="modelValue" @close="handleClose" draggable align-center append-to-body :close-on-click-modal="false">
    <div>
      <p v-if="length" class="text-[16px] mb-[16px]">
        已选择: <span class="text-[#3487FF]">{{ length }}</span>
      </p>
      <XForm ref="formRef" :fieldList="fieldList" :options="formOptions" :rules="rules" :formData="formData" :originOption="originOption" class="gap-x-2 x-form">
        <template v-for="(item, idx) in fieldList.filter((v) => v.slot)" :key="idx" #[item.slot]>
          <slot :name="item.slot" :form="formData" />
        </template>
        <template v-for="(item, idx) in fieldList.filter((v) => v.append)" :key="idx" #[item.append]>
          <slot :name="item.append" :form="formData" />
        </template>
      </XForm>
      <div v-if="tips" class="flex text-[12px] text-[#9DA1AD] leading-[17px] whitespace-pre-wrap">
        <span class="flex flex-shrink-0 mr-[2px]">图标</span>
        <div v-html="tips" />
      </div>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSave">
          {{ confirmButtonText }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import XForm from "@/components/XForm/index.vue"
import { nextTick } from "vue"
const props = defineProps({
  modelValue: { type: Boolean, default: false }, // 弹窗状态
  title: { type: String, default: "" }, // 弹窗 title
  width: { type: Number, default: 560 }, // 弹窗宽度
  length: { type: Number, default: 0 }, // 操作数据数量
  confirmButtonText: { type: String, default: "保存" }, // 保存按钮文案
  inputLabel: { type: String, default: "" },
  tips: { type: String, default: "" },
  // loading: { type: Boolean, default: false },
  //表单配置
  fieldOptions: {
    type: Array,
    default: () => [
      {
        field: "input",
        type: "textarea",
        label: "",
        style: { width: "100%" },
        autosize: { minRows: 2, maxRows: 6 },
        full: true,
      },
    ],
  },
  rules: { type: Object, default: () => ({}) }, // 表单验证
  // 表单 枚举
  originOption: { type: Object, default: () => ({}) },
  // 表单配置
  formOptions: { type: Object, default: () => ({ labelPosition: "top" }) },
  // 表单
  form: { type: Object, default: () => ({}) },
})

const emit = defineEmits(["update:modelValue", "submit", "close"])

const formRef = ref()
const formData = ref({})
const fieldList = ref([])
watch(
  () => [props.fieldOptions, props.inputLabel, props.form],
  (val) => {
    try {
      console.log("ConfirmInput ")
      const [options, label, form = {}] = val
      fieldList.value = options
      if (label && fieldList.value.length) {
        fieldList.value[0].label = label
      }
      // 回显
      if (Object.keys(form).length) {
        formData.value = form
      } else {
        formData.value = {}
      }
      // 去除表单验证
      setTimeout(() => {
        formRef?.value?.formRef?.clearValidate()
      }, 100)
    } catch (error) {
      console.log(error)
    }
  },
  { immediate: true }
)
const loading = ref(false)
const handleSave = async () => {
  loading.value = true
  try {
    await formRef.value.submit()
    emit("submit", formData.value)
    setTimeout(() => {
      loading.value = false
    }, 1000)
  } catch (e) {
    console.error(e)
    loading.value = false
  }
}

const handleClose = (refresh) => {
  emit("update:modelValue", false)
  nextTick(() => {
    formData.value = {}
    formRef.value.resetForm()
    emit("close")
    if (refresh) emit("refresh")
  })
}
</script>
<style lang="scss" scoped>
.x-form {
  :deep(.el-form-item__label) {
    margin-bottom: 4px !important;
  }
}
</style>
